<style lang="scss"></style>

<script>
import { deletePatrolGroup } from '@/api/watchman'

export default {
  props: {
    patrolGroupId: {
      type: [Number, null],
      required: true,
      default: null
    },
    title: {
      type: String,
      required: false,
      default: '确定删除吗？'
    },
    cancelBtnText: {
      type: String,
      required: false,
      default: '取消'
    },
    confirmBtnText: {
      type: String,
      required: false,
      default: '确定'
    }
  },
  data() {
    return {
      deletePopoverVisible: false,
      isDeleting: false
    }
  },
  computed: {
    isActionDisabled() {
      return this.isDeleting
    }
  },
  methods: {
    async handleDelete() {
      try {
        this.isDeleting = true

        await this.sleep(300)
        await deletePatrolGroup({ id: this.patrolGroupId })

        this.isDeleting = false
        this.closeDeletePopover()
        this.$emit('success')
      } catch (e) {
        this.isDeleting = false
        this.$emit('fail')
      }
    },
    sleep(t) {
      return new Promise(r => setTimeout(r, t))
    },
    showDeletePopover() {
      this.deletePopoverVisible = true
      console.log(this.deletePopoverVisible)
    },
    closeDeletePopover() {
      if (this.isDeleting) return
      this.deletePopoverVisible = false
    }
  }
}
</script>

<template>
  <el-popover v-model="deletePopoverVisible" placement="top" trigger="click">
    <div class="el-popconfirm">
      <p class="el-popconfirm__main">
        <i class="el-icon-question el-popconfirm__icon" style="color: #f90;" />
        {{ title }}
      </p>
      <div class="el-popconfirm__action">
        <el-button size="mini" :disabled="isDeleting" type="text" @click="closeDeletePopover">
          {{ cancelBtnText }}
        </el-button>
        <el-button size="mini" :disabled="isActionDisabled" :loading="isDeleting" type="primary" @click="handleDelete">
          {{ confirmBtnText }}
        </el-button>
      </div>
    </div>

    <!-- <span style="margin-left: 10px;"> -->
      <el-button slot="reference" circle plain type="danger" icon="el-icon-delete" />
    <!-- </span> -->
  </el-popover>
</template>
